<template>
  <view class="food-detail-container">
    <!-- 顶部图片区域 -->
    <view class="food-image">
      <image :src="foodData.icon" mode="aspectFill"></image>
      <!-- <view class="back-btn" @click="goBack">
        <u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
      </view> -->
    </view>

    <!-- 基本信息区域 -->
    <view class="food-info">
      <view class="food-name">{{ foodData.name }}</view>
      <view class="food-price">
        <text class="price-symbol">￥</text>
        <text class="price-value">{{ foodData.price }}</text>
      </view>
      <view class="food-desc">{{ foodData.dec }}</view>

      <view class="additional-info">
        <view class="info-item">
          <text class="info-label">包装费：</text>
          <text class="info-value">￥{{ foodData.packPrice }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">配送费：</text>
          <text class="info-value">￥{{ foodData.sendPrice }}</text>
        </view>
      </view>
    </view>

    <!-- 评论区入口 -->
    <view class="comment-section">
      <view class="section-header">
        <text class="section-title">餐品评价</text>
        <view class="section-actions">
          <view class="post-comment" @click="showPostCommentPopup">
            <text>发表评论</text>
            <u-icon name="edit-pen" color="#ff5500" size="14" style="margin-left: 4rpx;"></u-icon>
          </view>
          <view class="section-more" @click.stop="showAllComments">
            <text>查看全部</text>
            <u-icon name="arrow-right" color="#666666" size="14"></u-icon>
          </view>
        </view>
      </view>

      <!-- 评论预览 -->
      <view class="comment-preview" v-if="commentPreview.length > 0">
        <view class="comment-item" v-for="(item, index) in commentPreview" :key="index">
          <view class="comment-user">
            <image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
            <text class="user-name">{{ item.username }}</text>
            <view class="comment-rating">
              <u-icon name="star-fill" color="#FFD700" size="12" v-for="n in (Number(item.grade))" :key="n"></u-icon>
            </view>
          </view>
          <view class="comment-content">{{ item.text || item.content }}</view>
          <!-- 添加回复按钮 -->
          <view class="comment-actions">
            <text class="reply-btn" @click="showReplyInput(item._id || item.id)">回复</text>
          </view>
        </view>
      </view>

      <!-- 无评论时显示 -->
      <view class="no-comment" v-else>
        <text>暂无评价，快来评价吧</text>
      </view>
    </view>

    <!-- 底部操作区 -->
    <view class="bottom-actions">
      <view class="action-btn add-to-cart" @click="addToCart">
        <text>加入购物车</text>
      </view>
      <!-- <view class="action-btn buy-now" @click="buyNow">
        <text>立即购买</text>
      </view> -->
    </view>

    <!-- 添加评论弹窗 -->
    <u-popup :show="showCommentPopup" @close="closeCommentPopup" mode="bottom" round="10" safe-area-inset-bottom>
      <!-- 修改全部评价弹窗中的回复按钮 -->
      <view class="comment-popup">
        <view class="popup-header">
          <text class="popup-title">全部评价({{ allComments.length }})</text>
          <u-icon name="close" @click="closeCommentPopup" size="20"></u-icon>
        </view>
        <scroll-view scroll-y class="comment-list">
          <view v-for="(item, index) in allComments" :key="index">
            <!-- 主评论 -->
            <view class="comment-item">
              <view class="comment-user">
                <image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
                <view class="user-info">
                  <text class="user-name">{{ item.username }}</text>
                  <text class="comment-time">{{ formatTime(item.createTime) || '时间未知' }}</text>
                </view>
              </view>
              <view class="comment-rating">
                <u-icon name="star-fill" color="#FFD700" size="14" v-for="n in (Number(item.grade))" :key="n"></u-icon>
                <text class="rating-text">{{ getRatingText(Number(item.grade)) }}</text>
              </view>
              <view class="comment-content">{{ item.content || item.text }}</view>
              <view class="comment-images" v-if="item.images && item.images.length">
                <image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" mode="aspectFill"
                  @click="previewImage(item.images, imgIndex)"></image>
              </view>
              <!-- 修改回复按钮，传递正确的评论ID -->
              <view class="comment-actions">
                <text class="reply-btn" @click="showReplyInput(item.id || item._id)">回复</text>
              </view>
            </view>

            <!-- 回复列表 -->
            <view class="reply-list"
              v-if="(item.replies && item.replies.length > 0) || (item.subRemark && item.subRemark.length > 0)">
              <view class="reply-item" v-for="(reply, replyIndex) in (item.subRemark)" :key="replyIndex">
                <view class="reply-user">
                  <image class="user-avatar" :src="reply.avatar" mode="aspectFill"></image>
                  <view class="user-info">
                    <text class="user-name">{{ reply.username }}</text>
                    <text class="comment-time">{{ formatTime(item.createTime) || '时间未知' }}</text>
                  </view>
                </view>
                <view class="reply-content">
                  <text class="reply-to" v-if="reply.replyTo || reply.atUserName">回复 {{ reply.replyTo ||
        reply.atUserName }}：</text>
                  <text>{{ reply.content || reply.text }}</text>
                </view>
                <!-- 修改回复按钮，传递正确的评论ID和用户名 -->
                <view class="comment-actions">
                  <text class="reply-btn" @click="showReplyInput(item.id || item._id, reply.username)">回复</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 无更多数据提示 -->
          <view class="no-more" v-if="allComments.length > 0">
            <text>没有更多评价了</text>
          </view>
          <!-- 无评论时显示 -->
          <view class="no-comment" v-else>
            <text>暂无评价，快来评价吧</text>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <!-- 添加回复输入框弹窗 -->
    <u-popup :show="showReplyPopup" @close="closeReplyPopup" mode="bottom" round="10" safe-area-inset-bottom>
      <view class="reply-popup">
        <view class="popup-header">
          <text class="popup-title">{{ replyTo ? `回复：${replyTo}` : '添加回复' }}</text>
          <u-icon name="close" @click="closeReplyPopup" size="20"></u-icon>
        </view>
        <view class="reply-input-container">
          <textarea v-model="replyContent" placeholder="请输入回复内容" class="reply-textarea" auto-height />
        </view>
        <view class="reply-actions">
          <view class="reply-submit" @click="submitReply">发送</view>
        </view>
      </view>
    </u-popup>

    <!-- 添加发表评论弹窗 -->
    <u-popup :show="showPostPopup" @close="closePostPopup" mode="bottom" round="10" safe-area-inset-bottom>
      <view class="post-popup">
        <view class="popup-header">
          <text class="popup-title">发表评论</text>
          <u-icon name="close" @click="closePostPopup" size="20"></u-icon>
        </view>
        <view class="post-content">
          <view class="rating-container">
            <text class="rating-label">评分：</text>
            <view class="rating-stars">
              <u-icon v-for="i in 5" :key="i" :name="i <= postRating ? 'star-fill' : 'star'"
                :color="i <= postRating ? '#FFD700' : '#C0C0C0'" size="24" @click="postRating = i"></u-icon>
              <text class="rating-text">{{ getRatingText(postRating) }}</text>
            </view>
          </view>
          <view class="post-input-container">
            <textarea v-model="postContent" placeholder="请输入评论内容" class="post-textarea" auto-height />
          </view>
          <view class="post-image-upload">
            <view class="upload-title">
              <text>上传图片(选填)</text>
              <text class="upload-count">{{ postImages.length }}/3</text>
            </view>
            <view class="upload-list">
              <view class="upload-item" v-for="(img, index) in postImages" :key="index">
                <image :src="img" mode="aspectFill"></image>
                <view class="delete-btn" @click="removeImage(index)">
                  <u-icon name="close" color="#ffffff" size="12"></u-icon>
                </view>
              </view>
              <view class="upload-add" @click="chooseImage" v-if="postImages.length < 3">
                <u-icon name="plus" color="#999999" size="30"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="post-actions">
          <view class="post-submit" @click="submitComment">发表评论</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { currentFood } from '@/api/user/index'
import { remarkSave, searchRemark, replayRemark } from '@/api/remark/index'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

import config from '@/config'

const baseUrl = config.baseUrl

// 定义props接收商品数据
const props = defineProps({
  foodId: {
    type: String,
    default: ''
  },
  sellerId: {
    type: String,
    default: ''
  }
});
console.log('foodId: ', props.foodId || '');
console.log('sellerId: ', props.sellerId);

onMounted(() => {
});

// 商品数据
const foodData = ref({});

/**
 * 获取当前餐品
 */
currentFood({ id: props.foodId, sellerId: props.sellerId }).then(res => {
  console.log("currentFood--res: ", res);
  if (res.code == 200) {
    foodData.value = { id: res.data._id, ...res.data }
    console.log('foodData.value: ', foodData.value);
  }
})

/**
 * 查询当前餐品评论
 */
const getAllRemarks = () => {
  searchRemark({ foodId: props.foodId, }).then(res => {
    console.log("searchRemark--res: ", res);
    if (res.code == 200) {
      allComments.value = res.data.sort((a, b) => parseInt(b.createTime) - parseInt(a.createTime));
      console.log('allComments.value: ', allComments.value);
      // 更新评论预览，显示最新的两条评论
      if (allComments.value.length > 0) {
        commentPreview.value = allComments.value.slice(0, 2).map(item => ({
          _id: `p${item._id}`,
          username: item.username,
          avatar: item.avatar,
          grade: item.grade,
          text: item.text,
          images: item.images
        }));
      }
    }
  })
}
getAllRemarks()

// 评论预览数据 - 修改字段名
const commentPreview = ref([]);

// 所有评论数据 - 修改字段名
const allComments = ref([]);
// 评论弹窗控制
const showCommentPopup = ref(false);

// 显示所有评论
const showAllComments = () => {
  showCommentPopup.value = true;
};

// 关闭评论弹窗
const closeCommentPopup = () => {
  showCommentPopup.value = false;
};

// 根据评分获取评价文字
const getRatingText = (rating) => {
  const ratingTexts = {
    1: '非常差',
    2: '差',
    3: '一般',
    4: '好',
    5: '非常好'
  };
  return ratingTexts[Number(rating)] || '';
};

// 预览图片
const previewImage = (images, current) => {
  uni.previewImage({
    urls: images,
    current: images[current]
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 加入购物车
const addToCart = () => {
  // 加入购物车的逻辑
  uni.showToast({
    title: '已加入购物车',
    icon: 'success'
  });
};

// 立即购买
const buyNow = () => {
  // 立即购买的逻辑
  uni.navigateTo({
    url: `/pages/order/confirm?foodId=${foodData.value.id}&quantity=1`
  });
};


// 回复相关数据
const showReplyPopup = ref(false);
const replyContent = ref('');
const currentCommentId = ref(''); // 当前的评论id
const replyTo = ref('');

// 显示回复输入框
const showReplyInput = (commentId, username = '') => {
  console.log('显示回复输入框，评论ID:', commentId, '回复用户:', username);

  // 检查commentId是否存在
  if (!commentId) {
    uni.showToast({
      title: '评论ID不存在',
      icon: 'none'
    });
    return;
  }

  // 检查是否是当前用户自己的评论或回复
  const currentUsername = userStore.userInfo?.username || '当前用户';

  if (username === currentUsername) {
    uni.showToast({
      title: '不能回复自己的评论',
      icon: 'none'
    });
    return;
  }

  // 如果是评论，检查评论作者是否是当前用户
  if (!username) {
    // 先在allComments中查找
    const comment = allComments.value.find(item =>
      (item.id === commentId || item._id === commentId)
    );

    if (comment && comment.username === currentUsername) {
      uni.showToast({
        title: '不能回复自己的评论',
        icon: 'none'
      });
      return;
    }

    // 在commentPreview中查找
    const previewComment = commentPreview.value.find(item =>
      (item.id === commentId || item._id === commentId)
    );

    if (previewComment) {
      if (previewComment.username === currentUsername) {
        uni.showToast({
          title: '不能回复自己的评论',
          icon: 'none'
        });
        return;
      }

      // 如果在预览中找到了评论，使用预览评论的用户名
      username = previewComment.username;
    } else if (comment) {
      // 如果在allComments中找到了评论，使用评论的用户名
      username = comment.username;
    }
  }

  currentCommentId.value = commentId;
  replyTo.value = username;
  showReplyPopup.value = true;
};

// 关闭回复输入框
const closeReplyPopup = () => {
  showReplyPopup.value = false;
  replyContent.value = '';
  replyTo.value = '';
};

// 提交回复
const submitReply = () => {
  if (!replyContent.value.trim()) {
    uni.showToast({
      title: '请输入回复内容',
      icon: 'none'
    });
    return;
  }

  let pRemarkId = ''
  if (currentCommentId.value.startsWith('p')) {
    pRemarkId = currentCommentId.value.slice(1); // 去掉前缀'p'
  } else {
    pRemarkId = currentCommentId.value;
  }

  // 创建新回复
  const newReply = {
    username: userStore.userInfo?.username || '当前用户',
    userId: userStore.userId,
    avatar: userStore.userInfo?.avatar || 'http://localhost:8060/images/foodIcon/766ec201641964344854b4c55a0c3821.png',
    content: replyContent.value,
    text: replyContent.value, // 同时设置content和text字段，兼容不同数据结构
    time: new Date().toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }).replace(/\//g, '-'),
    createTime: Date.now().toString(), // 同时设置time和createTime字段，兼容不同数据结构
    replyTo: replyTo.value,
    atUserName: replyTo.value, // 同时设置replyTo和atUserName字段，兼容不同数据结构
    pRemarkId: pRemarkId, // 父评论的id
  };

  console.log('提交回复:', newReply, '评论ID:', currentCommentId.value);

  replayRemark(newReply).then(res => {
    console.log("replayRemark--res: ", res);
    if (res.code == 200) {
      getAllRemarks()
      closeReplyPopup();
      // 提示成功
      uni.showToast({
        title: '回复成功',
        icon: 'success'
      });
      showAllComments();
    }
  }).catch(err => {
    uni.showToast({
      title: '网络开了点小差~',
      icon: 'error'
    });
  })
};


// 发表评论相关数据
const showPostPopup = ref(false);
const postContent = ref('');
const postRating = ref(5);
const postImages = ref([]);

// 显示发表评论弹窗
const showPostCommentPopup = () => {
  showPostPopup.value = true;
};

// 关闭发表评论弹窗
const closePostPopup = () => {
  showPostPopup.value = false;
  postContent.value = '';
  postRating.value = 5;
  postImages.value = [];
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - postImages.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 这里应该上传图片到服务器，获取图片URL
      // 示例中直接使用本地临时路径
      postImages.value = [...postImages.value, ...res.tempFilePaths];
    }
  });
};

// 移除图片
const removeImage = (index) => {
  postImages.value.splice(index, 1);
};

// 提交评论
const submitComment = async () => {
  if (!postContent.value.trim()) {
    uni.showToast({
      title: '请输入评论内容',
      icon: 'none'
    });
    return;
  }

  if (!userStore.userId) {
    uni.showToast({
      title: '未登录',
      icon: 'error'
    });
  }
  if (!props.foodId || !props.sellerId) {
    uni.showToast({
      title: '状态异常, 请稍后重试~',
      icon: 'error'
    });
  }

  try {
    // 使用Promise.all等待所有图片上传完成
    const uploadPromises = postImages.value.map(item => {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: baseUrl + '/remark/uploadRemarkIcon',
          filePath: item,
          name: 'file',
          formData: {
            userId: userStore.userId,
          },
          success: (uploadRes) => {
            const res = JSON.parse(uploadRes.data);
            if (res.code == '200') {
              resolve(res.path);
            } else {
              reject(new Error(res.message));
            }
          },
          fail: (err) => {
            reject(err);
          },
        });
      });
    });

    // 等待所有图片上传完成
    const images = await Promise.all(uploadPromises);
    console.log('images: ', images);

    // 创建新评论
    const newComment = {
      foodId: props.foodId,
      sellerId: props.sellerId,
      userId: userStore.userId,
      avatar: userStore.userInfo.avatar || baseUrl + '/images/defaultAvatar/1.png',
      username: userStore.userInfo.username,
      createTime: Date.now(),
      grade: postRating.value,
      text: postContent.value,
      images: images,
      subRemark: [],
    };

    // 上传评论
    remarkSave(newComment).then(res => {
      if (res.code == 200) {
        console.log('res: ', res);
        uni.showToast({
          title: '评论成功',
          icon: 'success'
        });
      }
    })
    console.log('newComment: ', newComment);

    // 添加到评论列表
    allComments.value.unshift({ ...newComment, content: newComment.text, rating: newComment.grade });

    // 更新评论预览
    if (commentPreview.value.length >= 2) {
      commentPreview.value.pop(); // 移除最后一条
    }

    commentPreview.value.unshift({
      id: 'p' + newComment.id,
      username: newComment.username,
      avatar: newComment.avatar,
      rating: newComment.grade,
      content: newComment.text,
    });

    // 关闭弹窗
    closePostPopup();

    // 提示成功
    uni.showToast({
      title: '评论成功',
      icon: 'success'
    });
  } catch (err) {
    uni.showToast({
      title: err,
      icon: 'none'
    });
  }
};

const formatTime = (time) => {
  if (!time) return '时间未知';
  const date = new Date(parseInt(time));
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

</script>
<style lang="scss" scoped>
.food-detail-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.food-image {
  position: relative;
  width: 100%;
  height: 500rpx;

  image {
    width: 100%;
    height: 100%;
  }

  .back-btn {
    position: absolute;
    top: 40rpx;
    left: 30rpx;
    width: 60rpx;
    height: 60rpx;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.food-info {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx 16rpx 0 0;
  margin-top: -20rpx;
  position: relative;
  z-index: 1;

  .food-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16rpx;
  }

  .food-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 20rpx;

    .price-symbol {
      font-size: 28rpx;
      color: #ff5500;
      font-weight: bold;
    }

    .price-value {
      font-size: 40rpx;
      color: #ff5500;
      font-weight: bold;
    }
  }

  .food-desc {
    font-size: 28rpx;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 30rpx;
  }

  .additional-info {
    border-top: 1px solid #f0f0f0;
    padding-top: 20rpx;

    .info-item {
      display: flex;
      margin-bottom: 10rpx;

      .info-label {
        font-size: 26rpx;
        color: #999999;
        width: 120rpx;
      }

      .info-value {
        font-size: 26rpx;
        color: #333333;
      }
    }
  }
}

.comment-section {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 120rpx;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }

    .section-actions {
      display: flex;
      align-items: center;

      .post-comment {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        padding: 6rpx 12rpx;
        background-color: #fff5f0;
        border-radius: 20rpx;

        text {
          font-size: 24rpx;
          color: #ff5500;
        }
      }

      .section-more {
        display: flex;
        align-items: center;

        text {
          font-size: 26rpx;
          color: #666666;
          margin-right: 6rpx;
        }
      }
    }
  }

  .comment-preview {
    .comment-item {
      padding: 20rpx 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .comment-user {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;

        .user-avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }

        .user-name {
          font-size: 28rpx;
          color: #333333;
          margin-right: 20rpx;
        }

        .comment-rating {
          display: flex;
        }
      }

      .comment-content {
        font-size: 26rpx;
        color: #666666;
        line-height: 1.5;
      }
    }
  }

  .no-comment {
    padding: 40rpx 0;
    text-align: center;
    color: #999999;
    font-size: 28rpx;
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 100rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    font-weight: bold;

    &.add-to-cart {
      background-color: #fef0e5;
      color: #ff5500;
    }

    &.buy-now {
      background-color: #ff5500;
      color: #ffffff;
    }
  }
}

.comment-popup {
  max-height: 70vh;
  display: flex;
  flex-direction: column;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .comment-list {
    max-height: calc(70vh - 100rpx);
    padding: 0 30rpx;

    .comment-item {
      padding: 30rpx 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .comment-user {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .user-avatar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }

        .user-info {
          display: flex;
          flex-direction: column;

          .user-name {
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 4rpx;
          }

          .comment-time {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }

      .comment-rating {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .rating-text {
          font-size: 24rpx;
          color: #666666;
          margin-left: 10rpx;
        }
      }

      .comment-content {
        font-size: 28rpx;
        color: #333333;
        line-height: 1.5;
        margin-bottom: 16rpx;
      }

      .comment-images {
        display: flex;
        flex-wrap: wrap;

        image {
          width: 160rpx;
          height: 160rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          border-radius: 8rpx;
        }
      }
    }

    .no-more {
      text-align: center;
      padding: 30rpx 0;
      color: #999999;
      font-size: 26rpx;
    }
  }
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10rpx;

  .reply-btn {
    font-size: 24rpx;
    color: #666666;
    padding: 6rpx 12rpx;

    &:active {
      opacity: 0.7;
    }
  }
}

.reply-list {
  margin-left: 60rpx;
  border-left: 2rpx solid #f0f0f0;
  padding-left: 20rpx;

  .reply-item {
    padding: 20rpx 0;
    border-bottom: 1px dashed #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }

  .reply-user {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    .user-avatar {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      margin-right: 12rpx;
    }

    .user-info {
      display: flex;
      flex-direction: column;

      .user-name {
        font-size: 26rpx;
        color: #333333;
      }

      .comment-time {
        font-size: 22rpx;
        color: #999999;
      }
    }
  }

  .reply-content {
    font-size: 26rpx;
    color: #333333;
    line-height: 1.5;
    margin-bottom: 10rpx;

    .reply-to {
      color: #007AFF;
      margin-right: 6rpx;
    }
  }
}

.reply-popup {
  padding-bottom: env(safe-area-inset-bottom);

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .reply-input-container {
    padding: 20rpx 30rpx;

    .reply-textarea {
      width: 100%;
      min-height: 160rpx;
      background-color: #f8f8f8;
      border-radius: 8rpx;
      padding: 20rpx;
      font-size: 28rpx;
    }
  }

  .reply-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 30rpx 30rpx;

    .reply-submit {
      background-color: #ff5500;
      color: #ffffff;
      padding: 16rpx 40rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}

.post-popup {
  padding-bottom: env(safe-area-inset-bottom);

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .post-content {
    padding: 20rpx 30rpx;

    .rating-container {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .rating-label {
        font-size: 28rpx;
        color: #333333;
        margin-right: 20rpx;
      }

      .rating-stars {
        display: flex;
        align-items: center;

        .rating-text {
          font-size: 24rpx;
          color: #666666;
          margin-left: 10rpx;
        }
      }
    }

    .post-input-container {
      margin-bottom: 20rpx;

      .post-textarea {
        width: 100%;
        min-height: 160rpx;
        background-color: #f8f8f8;
        border-radius: 8rpx;
        padding: 20rpx;
        font-size: 28rpx;
      }
    }

    .post-image-upload {
      .upload-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;

        text {
          font-size: 28rpx;
          color: #333333;
        }

        .upload-count {
          color: #999999;
        }
      }

      .upload-list {
        display: flex;
        flex-wrap: wrap;

        .upload-item {
          position: relative;
          width: 160rpx;
          height: 160rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
          }

          .delete-btn {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
            width: 36rpx;
            height: 36rpx;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .upload-add {
          width: 160rpx;
          height: 160rpx;
          background-color: #f8f8f8;
          border: 1px dashed #dddddd;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .post-actions {
    display: flex;
    justify-content: center;
    padding: 0 30rpx 30rpx;

    .post-submit {
      background-color: #ff5500;
      color: #ffffff;
      padding: 16rpx 0;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: bold;
      width: 100%;
      text-align: center;
    }
  }
}
</style>